<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./highcharts.js"></script>
		<!-- <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script> -->
	</head>
	<body>
		<div id="container" style="width: 600px;height: 400px;margin: 0 auto;"></div>
	</body>

	<script type="text/javascript">
		var options = {
			chart: {
				type: 'spline'
			},
			title: {
				text: 'Populations'
			},
			credits: {
				enabled: false
			},
			subtitle: {
				text: '数据来源：thesolarfoundation.com'
			},
			xAxis: {
				title: {
					text: 'people'
				}
			},
			yAxis: {
				title: {
					text: 'weeks'
				}
			},
			legend: {
				layout: 'horizontal',
				align: 'center',
				verticalAlign: 'bottom'
			},
			plotOptions: {
				spline: {
					lineWidth: 4,
					states: {
						hover: {
							lineWidth: 5
						}
					},
					marker: {
						enabled: false
					},
				}
			},
			series: [{
				name: 'HIV -',
				data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
				color: 'rgb(89, 176, 60)'
			}, {
				name: 'HIV +',
				data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
				color: 'rgb(215, 50, 41)'
			}, {
				name: 'HIV ?',
				data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
				color: 'rgb(52, 93, 169)'
			}]
		};

		var char = Highcharts.chart('container', options);
		// setInterval(()=>{
		// 	char.series[0].addPoint(Math.random() * 100000);
		// 	char.series[1].addPoint(Math.random() * 100000);
		// 	char.series[2].addPoint(Math.random() * 100000);
		// }, 500)
	</script>
</html>
